import React, { Component } from 'react';
import axios from 'axios';

export default class List extends Component {
  searchValue = () => {
    const {
      input1: { value: q }
    } = this;
    const { getUsers } = this.props;
    getUsers({ isFirst: false, isLoading: true });
    axios({
      url: '/api/search/users',
      method: 'get',
      params: {
        q
      }
    }).then(
      res => {
        console.log('res', res);
        getUsers({ isLoading: false });
        const {
          data: { items: users }
        } = res;
        getUsers({ userList: users });
      },
      err => {
        
        getUsers({ err: err.message, isLoading: false });
      }
    );
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => (this.input1 = c)} type="text" placeholder="enter the name you search" />
          &nbsp;<button onClick={this.searchValue}>Search</button>
        </div>
      </section>
    );
  }
}
